import React from 'react'
import {Button, Icon, Modal, Input, message} from 'antd'
import Request from '../../utils/request'
import styles from './index.less'

export default class PutSong extends React.Component {

  constructor() {
    super();
    this.state = {
      songName: '',
      visible: false
    };
  }

  render() {
    return (
      <div className={styles.container}>
        <Button onClick={this.addSong.bind(this)}>
          <Icon type="plus-circle" />
          点歌
        </Button>
        <Button onClick={this.changeSong.bind(this)}>
          <Icon type="double-right" />
          切歌
        </Button>
        <Modal
        title="请输入歌名"
        visible={this.state.visible} 
        onCancel={this.cancel.bind(this)}
        onOk={this.add.bind(this)}
        >
            <Input defaultValue={this.state.songName} onChange={this.change.bind(this)} />
        </Modal>
      </div>
    );
  }

  addSong() {
    this.setState({
      visible: true
    });
  }

  changeSong() {
    Request.post('/song/change')
    .then(result => {
      if (result && result.code === 200) {
        return message.success('切歌成功');
      }
      this.error('切歌失败,请稍后再试!');
    })
    .catch(this.error.bind(null, '切歌失败,请稍后再试!'));
  }

  change(e) {
    this.setState({
      songName: e.target.value
    });
  }

  cancel() {
    this.setState({
      visible: false
    });
  }

  add() {
    if (!this.state.songName) {
      return message.warning('请输入歌名!!!');
    }
    Request.post('/song/put', {
      data: {
        songName: this.state.songName
      }
    })
    .then(result => {
      if (result && result.code === 200) {
        this.cancel();
        return message.success('点歌成功');
      }
      this.error();
    })
    .catch(this.error);
  }

  error(msg = '点歌失败,请稍后再试!') {
    return message.error(msg);
  }

}